<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
                      + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title></title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<meta name="robots" content="noindex">
		<link rel="stylesheet" href="css/loading.css">
		<style>
body {
	background: #111;
}

canvas {
	background: #111;
	border: 1px solid #171717;
	display: block;
	left: 50%;
	margin: -51px 0 0 -201px;
	position: absolute;
	top: 50%;
}
</style>
	</head>
	<body>
		<script>
/*========================================================*/
/* Light Loader
 /*========================================================*/
var lightLoader = function(c, cw, ch) {

	var _this = this;
	this.c = c;
	this.ctx = c.getContext('2d');
	this.cw = cw;
	this.ch = ch;

	this.loaded = 0;
	this.loaderSpeed = .6;
	this.loaderHeight = 10;
	this.loaderWidth = 310;
	this.loader = {
		x : (this.cw / 2) - (this.loaderWidth / 2),
		y : (this.ch / 2) - (this.loaderHeight / 2)
	};
	this.particles = [];
	this.particleLift = 180;
	this.hueStart = 0
	this.hueEnd = 120;
	this.hue = 0;
	this.gravity = .15;
	this.particleRate = 4;

	/*========================================================*/
	/* Initialize
	/*========================================================*/
	this.init = function() {
		this.loop();
	};

	/*========================================================*/
	/* Utility Functions
	/*========================================================*/
	this.rand = function(rMi, rMa) {
		return ~~((Math.random() * (rMa - rMi + 1)) + rMi);
	};
	this.hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2) {
		return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);
	};

	/*========================================================*/
	/* Update Loader
	/*========================================================*/
	this.updateLoader = function() {
		if (this.loaded < 100) {
			this.loaded += this.loaderSpeed;
		} else {
			location.href="login.jsp";
<%--		this.loaded = 0;--%>
		}
	};

	/*======================= =================================*/
	/* Render Loader
	/*========================================================*/
	this.renderLoader = function() {
		this.ctx.fillStyle = '#000';
		this.ctx.fillRect(this.loader.x, this.loader.y, this.loaderWidth,
				this.loaderHeight);

		this.hue = this.hueStart + (this.loaded / 100)
				* (this.hueEnd - this.hueStart);

		var newWidth = (this.loaded / 100) * this.loaderWidth;
		this.ctx.fillStyle = 'hsla(' + this.hue + ', 100%, 40%, 1)';
		this.ctx.fillRect(this.loader.x, this.loader.y, newWidth,
				this.loaderHeight);

		this.ctx.fillStyle = '#222';
		this.ctx.fillRect(this.loader.x, this.loader.y, newWidth,
				this.loaderHeight / 2);
	};

	/*========================================================*/
	/* Particles
	/*========================================================*/
	this.Particle = function() {
		this.x = _this.loader.x + ((_this.loaded / 100) * _this.loaderWidth)
				- _this.rand(0, 1);
		this.y = _this.ch / 2 + _this.rand(0, _this.loaderHeight)
				- _this.loaderHeight / 2;
		this.vx = (_this.rand(0, 4) - 2) / 100;
		this.vy = (_this.rand(0, _this.particleLift) - _this.particleLift * 2) / 100;
		this.width = _this.rand(1, 4) / 2;
		this.height = _this.rand(1, 4) / 2;
		this.hue = _this.hue;
	};

	this.Particle.prototype.update = function(i) {
		this.vx += (_this.rand(0, 6) - 3) / 100;
		this.vy += _this.gravity;
		this.x += this.vx;
		this.y += this.vy;

		if (this.y > _this.ch) {
			_this.particles.splice(i, 1);
		}
	};

	this.Particle.prototype.render = function() {
		_this.ctx.fillStyle = 'hsla(' + this.hue + ', 100%, '
				+ _this.rand(50, 70) + '%, ' + _this.rand(20, 100) / 100 + ')';
		_this.ctx.fillRect(this.x, this.y, this.width, this.height);
	};

	this.createParticles = function() {
		var i = this.particleRate;
		while (i--) {
			this.particles.push(new this.Particle());
		}
		;
	};

	this.updateParticles = function() {
		var i = this.particles.length;
		while (i--) {
			var p = this.particles[i];
			p.update(i);
		};
	};

	this.renderParticles = function() {
		var i = this.particles.length;
		while (i--) {
			var p = this.particles[i];
			p.render();
		}
		;
	};

	/*========================================================*/
	/* Clear Canvas
	/*========================================================*/
	this.clearCanvas = function() {
		this.ctx.globalCompositeOperation = 'source-over';
		this.ctx.clearRect(0, 0, this.cw, this.ch);
		this.ctx.globalCompositeOperation = 'lighter';
	};

	/*========================================================*/
	/* Animation Loop
	/*========================================================*/
	this.loop = function() {
		var loopIt = function() {
			requestAnimationFrame(loopIt, _this.c);
			_this.clearCanvas();

			_this.createParticles();

			_this.updateLoader();
			_this.updateParticles();

			_this.renderLoader();
			_this.renderParticles();

		};
		loopIt();
	};

};

/*========================================================*/
/* Check Canvas Support
 /*========================================================*/
var isCanvasSupported = function() {
	var elem = document.createElement('canvas');
	return !!(elem.getContext && elem.getContext('2d'));
};

/*========================================================*/
/* Setup requestAnimationFrame
 /*========================================================*/
var setupRAF = function() {
	var lastTime = 0;
	var vendors = [ 'ms', 'moz', 'webkit', 'o' ];
	for ( var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
		window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
		window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame']
				|| window[vendors[x] + 'CancelRequestAnimationFrame'];
	}
	;

	if (!window.requestAnimationFrame) {
		window.requestAnimationFrame = function(callback, element) {
			var currTime = new Date().getTime();
			var timeToCall = Math.max(0, 16 - (currTime - lastTime));
			var id = window.setTimeout(function() {
				callback(currTime + timeToCall);
			}, timeToCall);
			lastTime = currTime + timeToCall;
			return id;
		};
	}
	;

	if (!window.cancelAnimationFrame) {
		window.cancelAnimationFrame = function(id) {
			clearTimeout(id);
		};
	}
	;
};

/*========================================================*/
/* Define Canvas and Initialize
 /*========================================================*/
if (isCanvasSupported) {
	var c = document.createElement('canvas');
	c.width = 400;
	c.height = 100;
	var cw = c.width;
	var ch = c.height;
	document.body.appendChild(c);
	var cl = new lightLoader(c, cw, ch);

	setupRAF();
	cl.init();
}
</script>
		<div style="position: absolute; bottom: 0; width: 100%">
			<div class="footer-banner" style="width: 728px; margin: 30px auto"></div>
		</div>
		<script src="js/jquery.min.js">
</script>
	</body>
</html>
